Repository navigation
[React Native] Fix AcceleratedCheckoutButtons touch area smaller than the buttons - #548
Merged
Merged
Conversation
Coverage Report
|
`flex: 1` gives the view a flex basis of 0. When the parent's height is bounded, React Native lays the view out from that basis instead of the height reported by the native view, so the view is shorter than the buttons it draws and taps outside it are dropped. Use `flexGrow: 1` so the view is sized from the reported height while still filling row and taller parents.
kyle-schellen
force-pushed
the
ks/accelerated-checkout-buttons-height
branch
from
October 20, 2026 23:37
962fc21 to
17d07ed
Compare
kyle-schellen
changed the title
kyle-schellen
changed the title
kyle-schellen
marked this pull request as ready for review
October 21, 2026 20:47
josemiguel-alvarez
approved these changes
Oct 22, 2026
kiftio
approved these changes
Oct 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #502 for
@shopify/checkout-sheet-kit3.x.AcceleratedCheckoutButtonssetflex: 1, which gives the view a flex basis of 0. In a parent with no explicit height, the view is laid out from that basis instead of the height the native buttons report: 0 pt in a plainView, 48 pt in aViewwith onlyminHeight: 48. The buttons still draw at full size, but taps near their top and bottom edges do nothing. Inside aScrollView, where the sample places them,flex: 1already worked.flexGrow: 1keeps the reported height and still fills the width in row layouts.The dashed red outline marks the area that receives taps. I added it only for these screenshots.
How to test
sample/src/screens/CartScreen.tsx, move the Apple Pay and Shop PayAcceleratedCheckoutButtonsbelow theScrollViewand wrap them in<View style={{minHeight: 48}}>.main, nothing happens. With this change, checkout opens.I tested on iOS 18.6 and iOS 26.2 simulators. Buttons inside a
ScrollViewand in a row behave the same as before. Jest and lint pass.